<template>
  <div class="item pc-item text-center" @click="handleToShow()">
    <div class="img" :style="{backgroundImage:' url(https://kegonghui.oss-cn-beijing.aliyuncs.com/'+item.imgUrl+ ')'}">
    </div>
    <div class="produce">
      <p>{{item.curriculumName}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "course-item",
  props: ["item", 'nextPage'],
  methods: {
    handleToShow () {
      if (this.nextPage == 'myVideo') {
        this.$router.push({ path: '/my/myVideo/' + this.item.id })
      } else {
        window.open("/#/show/" + this.item.id);
      }

    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 20px;
  border-radius: 4px;
  background: #f7f5f5;
  border-radius: 10px;
  cursor: pointer;
  color: #212121;
  overflow: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  &:hover {
    box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
  }
  .img {
    height: 192px;
    background-repeat: no-repeat;
    background-size: cover;
    background: #ffffff;
    background-position: center;
    background-size: auto 192px;
  }
  .produce {
    height: 120px;
    padding: 20px;
    font-size: 16px;
    text-align: left;
    display: flex;
    align-items: center;
    p {
      //多行文本
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>